<template>
	<view style="background: #eff0f6;">
		<!-- <view class="head">值机人员需每天进行开机汇报</view> -->
		<view style="padding:30rpx 20rpx;display: flex;
		align-items: center;justify-content: space-between;background: #fff;border-bottom-left-radius: 20rpx;border-bottom-right-radius: 20rpx;">
			<text>当前状态:</text>
			<view style="color: #ff8c35;" v-if="status==0"  >待处理</view>
			<view style="color:#ff8c35;"  v-else-if="status==1"  >已完成</view>
			<view style="color:#ff8c35;"  v-else >已过期</view>
		</view>
		<view class="" style="background: #fff;margin: 20rpx;padding: 20rpx 20rpx;border-radius: 10rpx;">
			<view class="">任务信息</view>
			<view class="" style=" color: #546d8c;">
				{{content}}
			</view>
			
		</view>
		<view class="" style="background: #fff;margin: 20rpx;padding: 20rpx 20rpx;border-radius: 10rpx;display: flex;align-items: center;justify-content: space-between;">
			<text class="">任务时间</text>
			<text style=" color: #546d8c;">{{time}}</text>
			
			
		</view>
		<view class="" style="margin: 20rpx 20rpx;">
			<u-textarea height="300" v-model="handleNotice.describe" placeholder="备注信息" ></u-textarea>
		</view>
		
		<view class="" style="margin: 20rpx 20rpx;padding-bottom: 200rpx;">
			<view style="margin-bottom: 20rpx;">上传图片</view>
			<view class="" style="display: flex;flex-wrap: wrap;">
				<view class="" style="position: relative;width: 200rpx;margin: 10rpx	;" v-for="(img,index) in handleNotice.imgs" :key="index">
					<image  style="width: 200rpx;height:200rpx;" :src="baseUrl + img" mode="">
					</image>
					<u-icon color="red" style="position: absolute;right: -10px;top: -10px;" @click="delImg(index)" name="close" size="25"></u-icon>
				</view>
				<view class="add-img" style="display: flex;margin: 10rpx;justify-content: center;align-items: center;" @click="upload()">
					<image  style="width: 60rpx;height:60rpx;" src="../../static/imgs/add.png" mode="">
					</image>
				</view>
			</view>
		</view>
		<view class="" style="position: fixed;left: 0;bottom: 20rpx;width: 100%;">
			<view class="" style="margin: 0 20rpx;">
				<!-- <u-button type="primary" @click="submit" text="提交"></u-button> -->
				<view v-if="status==0" @click="submit" class="btn1">完成</view>
				<view v-else-if="status==1"  class="btn2">已完成</view>
				<view  v-else class="btn2">已过期</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				handleNotice:{
					id:'',
					status:'',
					source:'',
					describe:'',
					imgs:[]
				},
				status:'',//用来判断状态按钮的显示
				content:'',
				time:''
			}
		},
		onLoad(options) {
			console.log({options});
			this.handleNotice.id = options.r_id
			this.handleNotice.source = options.source
			this.status = options.status
			this.time = options.time
			this.getMsgFlow(options.id, options.source)
		},
		methods: {
			getMsgFlow(id,source) {
				this.$api.common.getMsgFlow({id,source}).then(res => {
					if(res.code == 1){
						this.msgFlow = res.data;
						this.handleNotice.status = String(res.data.status)
						this.handleNotice.describe = res.data.selfDescribe.describe
						this.content = res.data.content
						let imgs = res.data.selfDescribe.imgs || ''
						if(imgs){
							this.handleNotice.imgs = imgs.split(',')
						}
						

					}
				})
			},
			submit(){
				let handleNotice = JSON.parse(JSON.stringify(this.handleNotice))
				if(!handleNotice.id || !handleNotice.status || !handleNotice.source){
					return this.$u.toast('通知id或状态或来源不能为空')
				}
				handleNotice.imgs = handleNotice.imgs.join(',')
				this.$api.common.handleNotice(handleNotice).then(res => {
					if(res.code == 1){
						this.$u.toast('操作成功')
						
						setTimeout(() => {
							this.initBaojinList()
						},500)
						
					}
				})
			},
			//删除图片
			delImg(index){
				this.handleNotice.imgs.splice(index,1)
			},
			// 上传图片
			upload() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						tempFilePaths.forEach((item) => {
							uni.uploadFile({
								url: this.baseUrl + '/api/common/upload', // 你的上传接口地址
								filePath: item,
								header: {
									token: this.token
								},
								name: 'file', // 这里根据后端需要的字段来定义
								formData: {
									'user': 'test' // 其他要传的参数
								},
								success: (uploadFileRes) => {
									let data = JSON.parse(uploadFileRes.data);
									if (data.code == 1) {
										this.handleNotice.imgs.push(data.data.url) 
									} 
									this.$u.toast(data.msg)
									// 处理上传成功的结果
								},
								fail: (uploadFileErr) => {
									// 处理上传失败的情况
								}
							});
						} )
						
					}
				});
			},
		}
	}
</script>

<style>
	.head {
		background: #d9e2fd;
		padding: 0 20rpx;
		color: #426ef6;
		font-family: "PingFang SC";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 43.12rpx;
	}
	.add-img{
		width: 200rpx;
		height: 200rpx;
		flex-shrink: 0;
		border-radius: 12rpx;
		border: 2rpx solid #ddd;
		/* opacity: 0.7; */
	}
	.btn1{
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		flex-shrink: 0;
		border-radius: 12rpx;
		/* border: 0.2rpx solid #000; */
		text-align: center;
		background: linear-gradient(80deg, #0068F0 0%, #0196FE 100%);
		color: #ffffff;
		font-family: "PingFang SC";
		font-style: normal;
		font-weight: 500;
		/* line-height: normal; */
	}
	.btn2{
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		flex-shrink: 0;
		border-radius: 12rpx;
		/* border: 0.2rpx solid #000; */
		text-align: center;
		color: #ffffff;
		font-family: "PingFang SC";
		font-style: normal;
		font-weight: 500;
		background: linear-gradient(80deg, #BABABA 0%, #CCC 100%);
	}
</style>
